import React from 'react';
import './model.less'
class Modal extends React.Component {
    render() {
        let { visible, onOk, onCancel, children } = this.props;
        // children： undefined  string   虚拟DOM对象   数组
        let headers = [], bodys = [], footers = [];
        if(!children){
          headers.push(<h2>默认头部</h2>)
          bodys.push(<p>默认的身体</p>)
          footers.push(<button onClick={onOk}>OK</button>,<button onClick={onCancel}>cancel</button>)
        }else if(typeof children == 'string'){
          headers.push(<h2>默认头部</h2>)
          bodys.push(children)
          footers.push(<button onClick={onOk}>OK</button>,<button onClick={onCancel}>cancel</button>)
        }else if(Array.isArray(children)){
          children.forEach(item=>{
            if(item.props&&item.props.slot === 'header'){
              headers.push(item)
            }else if(item.props&&item.props.slot === 'footer'){
              footers.push(item)
            }else{
              bodys.push(item)
            }
          })
          if(headers.length == 0){
            headers.push(<h2>默认头部</h2>)
          }
          if(bodys.length == 0){
            bodys.push(<p>默认的身体</p>)
          }
          if(footers.length == 0){
            footers.push(<button onClick={onOk}>OK</button>,<button onClick={onCancel}>cancel</button>)
          }
        }else{
          if(children.props.slot === 'header'){
            headers.push(children)
            bodys.push(<p>默认的身体</p>)
            footers.push(<button onClick={onOk}>OK</button>,<button onClick={onCancel}>cancel</button>)
          }else if(children.props.slot === 'footer'){
            footers.push(children)
            headers.push(<h2>默认头部</h2>)
            bodys.push(<p>默认的身体</p>)
          }
        }
        return <>
            {
                visible ?
                    <div className='modal_box'>
                        <h3>{headers}</h3>
                        <div>
                            {bodys}
                        </div>
                        <div>
                          {footers}
                        </div>
                        
                    </div> :
                    ''
            }
        </>;
    }
}
export default Modal